<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import knowAPIRequest from '@/util/api/know'
	import { ref } from 'vue'
	
	// 说明书详情
	const detail = ref({
		name: '',
		content: '',
		updateTime: '',
	})
	
	/**
	 * 获取说明书详情
	 * @param {String} id - 说明书id
	 */
	const getDetail = async (id: string) => {
		uni.showLoading({
			title: '加载中',
			mask: true,
		})
		const res = await knowAPIRequest.getManualDetail(id)
		uni.hideLoading()
		if (res.code === 20000) {
			detail.value = res.data.row
			detail.value.content = detail.value.content.replace(/<img/gi, "<img class='editor-img'")
		}
	}
	
	onLoad((query: { id: string }) => {
		if (query && query.id) {
			getDetail(query.id)
		}
	})
</script>

<template>
	<view class="manual-detail-wrapper">
		<view class="name">{{ detail.name }}</view>
		<view class="update-time" v-if="detail.updateTime">更新时间：{{ detail.updateTime }}</view>
		<view class="content-wrapper">
			<mp-html :content="detail.content"></mp-html>
		</view>
	</view>
</template>

<style>
	page {
		height: 100%;
	}
</style>

<style scoped lang="scss">
	.editor-img {
	    width: 100% !important;
	    height: auto !important;
	}
	
	.manual-detail-wrapper {
		width: 100vw;
		height: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		row-gap: 10rpx;
		
		.name {
			text-align: center;
			font-weight: bold;
		}
		
		.update-time {
			text-align: center;
			color: #666;
		}
		
		.content-wrapper {
			height: 1100rpx;
			width: 100%;
			overflow: auto;
		}
	}
</style>
